<template>
  <!-- 新增表单弹框 -->
  <el-dialog
    :title="dialogTitle"
    :visible.sync="addDialogVisible"
    width="25%"
    :before-close="beforeCloseDialog"
    @open="openDialog"
  >
    <el-form :model="params" ref="params" label-width="80px" label-position="left" :rules="rules">
      <el-form-item label="字典编码" size="small" prop="code">
        <el-input v-model="params.code" autocomplete="off" size="mini" maxlength="5"></el-input>
      </el-form-item>
      <el-form-item label="字典值" size="small" prop="value">
        <el-input v-model="params.value" autocomplete="off" size="mini" maxlength="8"></el-input>
      </el-form-item>
      <el-form-item label="父类型" prop="parentType">
        <el-select v-model="params.parentType" placeholder="父类型" size="mini">
          <el-option
            :label="item.description"
            :key="item.code"
            :value="item.code"
            v-for="item in dictionaryTypeArray"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述" size="small" prop="description">
        <el-input v-model="params.description" autocomplete="off" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="是否生效" size="small" prop="enableFlag">
        <el-select v-model="params.enableFlag" placeholder="是否生效" size="mini">
          <el-option label="生效" value="1"></el-option>
          <el-option label="无效" value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="danger" @click="cancelAdd" size="mini">取 消</el-button>
      <el-button type="primary" @click="confirmAdd" size="mini">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addDictionary, updateDictionary } from "@/components/api/project";
import Constants from "@/components/util/Constants";
import GlobalUtil from "@/components/util/GlobalUtil";

export default {
  name: "AddDictionary",
  props: { //接收父组件参数
    addDialogVisible: Boolean,
    dictionaryTypeArray: Array,
    dictParam: Object,
    dialogTitle: String,
    operation: String
  },
  data() {
    return {
      params: {
        uuid: "",
        code: "",
        value: "",
        parentType: "",
        description: "",
        enableFlag: "1"
      },
      rules: {
        code: [
          {
            required: true,
            min: 5,
            max: 5,
            message: "输入字典编码,长度在5个字符",
            trigger: "blur"
          }
        ],
        value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
        parentType: [
          {
            required: true,
            min: 5,
            max: 5,
            message: "请选择字典父类型",
            trigger: "blur"
          }
        ],
        description: [
          { required: true, message: "请输入字典描述", trigger: "blur" }
        ],
        enableFlag: [
          {
            required: true,
            min: 1,
            max: 2,
            message: "请选择字典是否有效",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    cancelAdd() {
      //注意：子组件不要更改父组件的变量，而是通过emit向上传递由父组件修改
      this.$emit("closeAddDialog");
    },
    confirmAdd() {
      this.$refs["params"].validate(valid => {
        if (valid) {
          if (this.operation === Constants.ADD_STR) {
            addDictionary(this.params, () => {
              this.$emit("closeAddDialog");
              this.$emit("search");
            });
          } else if (this.operation === Constants.UPDATE_STR) {
            updateDictionary(this.params, () => {
              this.$emit("closeAddDialog");
              this.$emit("search");
            });
          }
        }
      });
    },
    beforeCloseDialog() {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.$emit("closeAddDialog");
        })
        .catch(_ => {});
    },
    openDialog() {
      this.params = GlobalUtil.cloneObject(this.dictParam);
    }
  }
};
</script>
<style scoped>
  .el-form-item{
    margin: 15px;
  }
</style>